<template>
  <el-dialog
    class="wait-claim-equipment-task-dialog"
    title="任务集合"
    width="1200px"
    :visible.sync="dialogVisible"
    :close-on-click-modal="true"
    v-dialogDrag="true"
    append-to-body
    @open="handleDialogOpen"
    @closed="handleDialogClosed"
  >
    <el-form :model="queryParams" size="small" :inline="true">
      <el-form-item label="合同编号">
        <el-input
          style="width: 200px;"
          v-model="queryParams.agreementNumber"
          placeholder="请输入"
          @keyup.enter.native="handleSearch"
        ></el-input>
      </el-form-item>
      <el-form-item label="客户">
        <el-input
         v-model="queryParams.organizationName"
         placeholder="请输入"
         @keyup.enter.native="handleSearch"
        ></el-input>
      </el-form-item>
      <el-form-item label="联系人">
        <el-input
         v-model="queryParams.contactsName"
         placeholder="请输入"
         @keyup.enter.native="handleSearch"
        ></el-input>
      </el-form-item>
      <el-form-item label=" " label-width="20px">
        <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="tableLoading" :data="tableList">
      <el-table-column label="序号" type="index" align="center" width="50"></el-table-column>
      <el-table-column label="合同编号" align="center" prop="agreementNumber" min-width="110">
        <template slot-scope="scope">
          <span>{{ scope.row.agreementNumber }}</span>
        </template>
      </el-table-column>
      <el-table-column label="委托单位" align="center" prop="organizationName" min-width="160" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.organizationName }}</span>
        </template>
      </el-table-column>
			<el-table-column label="联系人" align="center" prop="contactsName" min-width="180">
        <template slot-scope="scope">
          <span>{{ scope.row.contactsName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="联系电话" align="center" prop="contactsMobile" min-width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.contactsMobile }}</span>
        </template>
      </el-table-column>
      <el-table-column label="单位地址" align="center" prop="organizationAddress" min-width="160">
        <template slot-scope="scope">
          <span>{{ scope.row.organizationAddress }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建日期" align="center" prop="createTime" min-width="95">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
			<el-table-column label="操作" align="center" prop="" width="70">
        <template slot-scope="scope">
					<el-link style="margin-right: 6px;" type="primary" @click="handleDistribute(scope.row)">派发</el-link>
        </template>
      </el-table-column>
		</el-table>

		<pagination
			:page.sync="queryParams.pageNum"
			:limit.sync="queryParams.pageSize"
			:total="tableTotal"
			@pagination="getTableListData"
		></pagination>

    <div class="dialog-footer" slot="footer">
      <el-button @click="dialogVisible = false">关 闭</el-button>
    </div>

    <el-dialog
      class="distribute-task-dialog"
      title="派发任务"
      width="500px"
      :visible.sync="showDistributeDialog"
      :close-on-click-modal="true"
      v-dialogDrag="true"
      append-to-body
    >
      <el-form
        ref="distributeTaskForm"
        :model="formData"
        :rules="formRules"
        size="small"
        label-width="100px"
      >
        <el-form-item label="任务指派人" prop="taskAssignor" label-width="100px">
          <el-select
            style="width: 100%"
            v-model="formData.taskAssignor"
            placeholder="请选择"
            :filterable="true"
            :multiple="true"
            :clearable="true"
          >
            <el-option
              v-for="(item, index) in assignorList"
              :key="index"
              :label="item.value"
              :value="item.key"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <div class="dialog-footer" slot="footer">
        <el-button style="margin-right: 50px;" type="primary" @click="handleConfirmDistribute">确 认</el-button>
        <el-button @click="showDistributeDialog = false">关 闭</el-button>
      </div>
    </el-dialog>
  </el-dialog>
</template>

<script>
import { detectionEquipmentWaitClaimList, claimDetectionEquipmentTask } from '@/api/testItem/detectionResult'
import { getAssignorList } from '@/api/slides/detectionTogether'

export default {
  name: 'WaitClaimEquipmentTaskDialog',
  components: {},
  dicts: [],
  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      queryParams: {},
      tableLoading: false,
      tableList: [],
      tableTotal: 0,

      currRow: {},
      assignorList: [],
      formData: {},
      formRules: {
        taskAssignor: [
          { required: true, message: '请选择任务指派人', trigger: 'change' }
        ],
      },
      showDistributeDialog: false,
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.show
      },
      set(value) {
        this.$emit('update:show', value)
      }
    }
  },
  created() {
    this.initQueryParams()
    this.initFormData()
  },
  methods: {
    // 弹框打开时
    handleDialogOpen() {
      this.getTableListData()
    },
    // 弹框关闭时
    handleDialogClosed() {
      this.initQueryParams()
    },
    // 初始化查询参数
    initQueryParams() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        agreementNumber: '',
        organizationName: '',
        contactsName: '',
      }
    },
    // 获取查询参数
    getQueryParams() {
      const params = JSON.parse(JSON.stringify(this.queryParams))
      return params
    },
    // 获取表格数据
    getTableListData() {
      this.tableLoading = true
      const params = this.getQueryParams()
      detectionEquipmentWaitClaimList(params).then(res => {
        this.tableLoading = false
        this.tableList = res.rows || []
        this.tableTotal = res.total || 0
      }).catch(err => {
        this.tableLoading = false
      })
    },
    // 点击搜索
    handleSearch() {
      this.queryParams.pageNum = 1
      this.getTableListData()
    },
    // 点击重置
    handleReset() {
      this.initQueryParams()
      this.getTableListData()
    },

    // 获取派发人下拉框
    getAssignorList() {
      getAssignorList().then(res => {
        this.assignorList = res.data || []
      }).catch(err => {})
    },
    // 初始化表单数据
    initFormData() {
      this.formData = {
        taskAssignor: []
      }
    },
    // 获取表单数据
    getFormData() {
      const data = JSON.parse(JSON.stringify(this.formData))
      data.taskDetectionEquipmentId = this.currRow.taskDetectionEquipmentId
      data.taskAssignor = data.taskAssignor?.join(',')
      return data
    },
    // 点击派发
    handleDistribute(row) {
      this.getAssignorList()
      this.currRow = row
      this.showDistributeDialog = true
    },
    // 确认派发
    handleConfirmDistribute() {
      this.$refs.distributeTaskForm.validate(valid => {
        if (valid) {
          const data = this.getFormData()
          claimDetectionEquipmentTask(data).then(res => {
            this.$message.success('操作成功')
            this.showDistributeDialog = false
            this.getTableListData()
            setTimeout(() => {
              this.initFormData()
            }, 500)
          }).catch(err => {})
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.wait-claim-equipment-task-dialog {

  ::v-deep .el-dialog__body {
    max-height: 70vh;
    overflow-y: auto;
  }
}
</style>
